<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base1.css">
    <link rel="stylesheet" href="./css/person.css">
    <link rel="stylesheet" href="./css/detail.css">
</head>
<body>
    <div id="hdd"></div>


    <div class="comm">
        <div class="comm-one">
            <div class="smlbox">
                <img src="./imgs/sml.jpg" alt="">
                <span></span>
                <div class="sml"></div>
                <div class="magn"><img src="./imgs/big.jpg" alt=""></div>
            </div>
            <div class="smlxian">
                <input type="submit" class="xlu-left" value="＜">
                <div class="xiaolutu">
                    <li class="xlt-one"><img src="" alt=""></li>
                    <li class="xlt-one"><img src="" alt=""></li>
                    <li class="xlt-one"><img src="" alt=""></li>
                    <li class="xlt-one"><img src="" alt=""></li>
                    <li class="xlt-one"><img src="" alt=""></li>
                </div>
                <input type ='submit' value ='＞' class="xlu-right">
            </div>
        </div>
        <div class="comm-two">
            <p class="right-xqone">
                大宇 DAEWOO取暖器/电暖器/电热暖气片家用 石墨烯踢脚线 京东小家智能生态负离子净化移动地暖AK2210               
            </p>
            <div class="item " id="p-ad" clstag="shangpin|keycount|product|slogana" data-hook="hide" title="【今日8点限时秒杀！到手仅699元！晒单返30！领券立减200！咨询客服更优惠】【石墨烯发热，自动开合防尘盖】质保三年！负离子净化，无雾加湿不干燥限时秒杀推荐查看>" style="display: block;">【今日8点限时秒杀！到手仅699元！晒单返30！领券立减200！咨询客服更优惠】【石墨烯发热，自动开合防尘盖】质保三年！负离子净化，无雾加湿不干燥限时秒杀推荐<a href="//item.jd.com/100014274305.html" target="_blank">查看&gt;</a></div>
            <div class="daojishi">
                <p class="daojishi-ms">秒杀</p>
            </div>
            <div class="jiangjia">
                <div class="jg">
                    <p class="msj">秒杀价</p><span>&nbsp;￥&nbsp;8888</span>
                    <p class="jptz">[降价通知]</p>
                </div>
                <div class="yhjg">
                    <p class="yhj">优惠券</p>
                    <p class="manjian">满600减100</p>
                </div>
                <div class="manjianjia">
                    <p class="mj">满减</p>
                    <p class="xj">每满800，减100元现金</p>
                </div>

               <div class="xg">限购</div>
               <div class="send">
                   <p class="cend">配送至</p>
                   <select name="" id="st"><option value="">上海徐汇区城区</option></select>
               </div>
            </div>
            <div class="comm-thr">加入购物车</div>
        </div>
        
    </div>




    <!-- <div class="Details auto clearfix">
        <div class="smlimg">
            <div class="smlbox">
                <img src="" alt="">
                <span></span>
            </div>
            <div style="width: 375px; overflow: hidden; padding-left: 4px;">
                <ul class="magnifier">
                    
                </ul>
            </div>
            <div class="btns">
                <input type="button" class="iconfont" value="&#xe60e;" id="left">
                <input type="button" class="iconfont" value="&#xe62e;" id="right">
            </div>
        </div>
        <div class="bigimg">
            <img src="" alt="">
        </div>
        <div class="comm_Details">
            <div class="comm_Details_title">
                <h6 class="title_text">集什好物，值得购买</h6>
            </div>
            <div class="comm_Details_cont">
                <div class="Details_cont_head">
                    <i class="iconfont">&#xe600;</i>
                    <span>满800减100</span>
                    <b>距离活动结束 86天</b>
                </div>
                <div class="comm_Details_price">
                    <label >打折价</label>
                    <span class="price" style="color:rgb(32, 82, 158);" ></span>
                    <span class="_price"></span>
                </div>
                <div class="Discount">
                    <b for="">优惠券</b>
                    <span style="diaplay:block;background-color: rgb(32, 82, 158);">超划算</span>
                    <span class="iconfont">更多优惠券 &#xe62f;</span>
                </div>
            </div>
            <div class="area">
                <ul>
                    <li class="area_li">
                        <label for="" class="area_left">配送至</label>
                        <div class="area_cen">
                            <span>上海市 &nbsp; </span>
                            <i class="iconfont">&#xe62f;</i>
                            <ul>
                                <li class="active">北京</li>
                                <li>天津</li>
                                <li>河北省</li>
                                <li>山西省</li>
                                <li>山东省</li>
                                <li>上海市</li>
                            </ul>
                        </div>
                        <label for="" class="area_right">该地区有货</label>
                    </li>
                </ul>
            </div>
            <div class="numBtns">
               <ul>
                   <li class="Quantity">
                    <label for="">数量</label>
                    <span class="Less fl">-</span>
                    <span class="num fl">1</span>
                    <span class="push fl">+</span>
                   </li>
                   <li class="purchase">
                      <a href="./cart.html" ><button class="join" style="color: rgb(32, 82, 158);
                        border-color: rgb(32, 82, 158);">加入购物车</button></a>
                       <button class="join">加入购物车</button>
                      <button class="buy" style="background-color: rgb(32, 82, 158);border-color: rgb(32, 82, 158);">立即购买</button> 
                      <span class="join_span"  >请先登录</span>
                      <span class="buy_span">商品库存不足，请选择其他商品</span>
                   </li>
               </ul>
            </div>
        </div>
    </div> -->

    <div id="d"></div>
    
</body>
<script src="./js/jquery2.2.4.js"></script>
<script>
    $('#hdd').load('http://localhost:3000/connect/header.html .hdd');
    $('#d').load('http://localhost:3000/connect/header.html .d');
    
    </script>
    <script src="./js/detail.js"></script>
 <script>   
// const id = location.search.split("=")[1];

// 方法一：获取所有商品数据，前端筛选（不推荐）
// 方法二：根据id请求后端接口，直接获取指定数据（后端筛选）（推荐）

// ajax("http://localhost:3000/homethtwo.json",res=>{
//     res = JSON.parse(res);
//     console.log(res);
//     let i = 0;
//     res.some((val,idx)=>{
//         i = idx;
//         return val.produceId === id
//     })
    // ajax("http://localhost:3000/homethone.json",res=>{
    // res = JSON.parse(res);
    // console.log(res);
    // let j = 0;
    // res.some((val,idx)=>{
    //     j = idx;
    //     return val.produceId === id
    // })
    // ajax("http://localhost:3000/homezkh1.json",res=>{
    // res = JSON.parse(res);
    // console.log(res);
    // let q = 0;
    // res.some((val,idx)=>{
    //     q = idx;
    //     return val.produceId === id
    // })
    // ajax("http://localhost:3000/homezkh2.json",res=>{
    // res = JSON.parse(res);
    // console.log(res);
    // let d = 0;
    // res.some((val,idx)=>{
    //     d = idx;
    //     return val.produceId === id
    // })
    // ajax("http://localhost:3000/lubo.json",res=>{
    // res = JSON.parse(res);
    // console.log(res);
    // let p = 0;
    // res.some((val,idx)=>{
    //     p = idx;
    //     return val.produceId === id
    // })
    // ajax("http://localhost:3000/sui.json",res=>{
    // res = JSON.parse(res);
    // console.log(res);
    // let v = 0;
    // res.some((val,idx)=>{
    //     v = idx;
    //     return val.produceId === id
    // })




//     console.log(res[i])
//     // 渲染小图
//     $(".smlbox>img").src = res[i].src;
//     // 渲染大图
//     $(".bigimg>img").src = res[i].src;
//     // 渲染图片列表
//     let str = "";
//     res[i].otherimg.forEach(val=>{
//         str += `<li><img src="${val}" alt=""></li>`
//     })
//     $(".magnifier").innerHTML = str;

//     // 渲染标题
//     $(".title_text").innerHTML = res[i].proName;
//     // 计算并渲染现价
//     $(".price").innerHTML = "￥" + (res[i].price * (res[i].discount / 10)).toFixed(1);
//     // 渲染原价
//     $("._price").innerHTML = "￥" + res[i].price;




//     new Magnifier({
//         left:document.getElementById("left"),
//         right:document.getElementById("right"),
//         sBspan:document.querySelector(".smlbox span"),
//         sBox:document.querySelector(".smlbox"),
//         bBox:document.querySelector(".bigimg"),
//         sBimg:document.querySelector(".smlbox img"),
//         bBimg:document.querySelector(".bigimg img"),
//         imgBox:document.querySelector(".magnifier"),
//         imgs:document.querySelectorAll(".magnifier li img")
//     })





// },{
//     type:"getGoods"
// })


// function $(s){
//     return document.querySelector(s);
// }


// function ajax(url, callback, data){
//     let str = "";
//     for(let i in data){
//         str += `${i}=${data[i]}&`
//     }
//     url += "?" + str;
//     const xhr = new XMLHttpRequest();
//     xhr.open("get",url)
//     xhr.onload = function(){
//         if(xhr.status === 200){
//             callback(xhr.responseText)
//         }
//     }
//     xhr.send();
// }






// function Magnifier(ops){
//     this.left = ops.left;
//     this.right = ops.right;
//     this.sBspan = ops.sBspan;
//     this.sBox = ops.sBox;
//     this.bBox = ops.bBox;
//     this.sBimg = ops.sBimg;
//     this.bBimg = ops.bBimg;
//     this.imgBox = ops.imgBox;
//     this.imgs = ops.imgs;
//     this.imgBox.style.width = (this.imgs.length+1)*this.imgs[0].offsetWidth +"px";
//     this.index = 0;
//     this.addEvent();
// }
// Magnifier.prototype.addEvent = function(){
//     const _this = this;
//     this.sBox.onmouseenter = function(){
//         _this.show();
//     }
//     this.sBox.onmouseleave = function(){
//         _this.hide();
//     }
//     this.sBox.onmousemove = function(eve){
//         const e = eve||window.event;
//         _this.move(e); 
//     }
//     this.left.onclick = function(){
//         _this.leftChangeIndex();
//     }
//     this.right.onclick = function(){
//         _this.rightChangeIndex();
//     }
//     for(let i=0;i<this.imgs.length;i++){
//         this.imgs[i].onclick = ()=>{
//             for(var j=0;j<this.imgs.length;j++){
//                 this.imgs[j].style.border = "1px solid #EFF0F5";
//             }
//             console.log(i);
//             this.bBimg.src = this.sBimg.src = this.imgs[i].src;
//             this.imgs[i].style.border = "1px solid red"
//         }
//     }
// }
// Magnifier.prototype.rightChangeIndex = function(){
//     if(this.index === this.imgs.length-5){
//         this.index = 0;
//     }else{
//         this.index++;
//     }
//     this.render();
// }
// Magnifier.prototype.leftChangeIndex = function(){
//     if(this.index === 0){
//         this.index = 0
//     }else{
//         this.index--;
//     }
//     this.render();
// }
// Magnifier.prototype.render = function(){
//     move(this.imgBox,{
//         left:-this.index*this.imgs[0].offsetWidth
//     })
// }
// Magnifier.prototype.show = function(){
//     this.bBox.style.display = "block";
//     this.sBspan.style.display = "block";
//     this.sBspan.style.width = this.sBox.offsetWidth/(this.bBimg.offsetWidth/this.bBox.offsetWidth)+"px";
//     this.sBspan.style.height = this.sBox.offsetHeight/(this.bBimg.offsetHeight/this.bBox.offsetHeight)+"px";
// }
// Magnifier.prototype.hide = function(){
//     this.bBox.style.display = "none";
//     this.sBspan.style.display = "none";
// }
// Magnifier.prototype.move = function(e){
//     let L = e.pageX -(this.sBox.offsetWidth /2)- this.sBspan.offsetWidth +140;
//     let T = e.pageY -this.sBox.offsetHeight- this.sBspan.offsetHeight/2 -20;


//     if(L < 0) L = 0;
//     if(T < 0) T = 0;
//     if(L > this.sBox.offsetWidth - this.sBspan.offsetWidth){
//         L = this.sBox.offsetWidth - this.sBspan.offsetWidth
//     }
//     if(T > this.sBox.offsetHeight - this.sBspan.offsetHeight){
//         T = this.sBox.offsetHeight - this.sBspan.offsetHeight
//     }
//     this.sBspan.style.left = L + "px";
//     this.sBspan.style.top = T + "px";
//     let X = L/(this.sBox.offsetWidth -  this.sBspan.offsetWidth);
//     let Y = T/(this.sBox.offsetHeight - this.sBspan.offsetHeight);
//     this.bBimg.style.left = (this.bBox.offsetWidth-this.bBimg.offsetWidth)*X+0.992+"px";
//     this.bBimg.style.top = (this.bBox.offsetHeight-this.bBimg.offsetHeight)*Y-4.98+"px";

// }
</script>
</html>
